<template>
  <el-drawer
    title="新建"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input v-model="form.menuPath"></el-input>
        </el-form-item>
        <el-form-item label="请求路径">
          <el-input v-model="form.action"></el-input>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-cascader
            style="width: 100%"
            v-model="form.pid"
            :placeholder="placeholderSelect"
            :options="tableData"
            :props="optionProps"
            clearable
            :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select
            v-model="form.menuType"
            placeholder="菜单类型"
            clearable
            class="select-width"
          >
            <el-option label="目录" value="0"></el-option>
            <el-option label="菜单" value="1"></el-option>
            <el-option label="按钮" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.menuIcon"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.menuSort" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="out">
          <el-switch v-model="form.display" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_SELECT } from "@/util/constant";
// import { insertUserApi } from "@/api/modules/user.api";
import { addMenuApi } from "@/api/modules/menu.api";

export default {
  props: ["tableData"],
  data() {
    return {
      visible: false,
      placeholderSelect: PLEASE_SELECT,
      form: {
        menuName: "",
        menuSort: "",
        menuPath: "",
        pid: "",
        menuIcon: "",
        menuType: "",
        isOut: false,
        display: true,
        outHref: "",
        action: "",
      },
      optionProps: {
        value: "menuId",
        label: "menuName",
        children: "childMenu",
        checkStrictly: true,
      },
      drawerSize: DRAWER_SIZE,
    };
  },
  methods: {
    init() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    async handleAdd() {
      if (Array.isArray(this.form.pid)) {
        this.form.pid = this.form.pid.slice(-1)[0];
      } else {
        this.form.pid = 0;
      }
      await addMenuApi(this.form);
      this.$message({
        message: "成功",
        type: "success",
      });
      this.visible = false;
      this.form = {};
      this.$emit("getParentTableData");
    },
  },
};
</script>
<style scoped>
.select-width {
  width: 100%;
}
</style>
